<!--
 * @Description: ICON预览
 * @Author: DHL
 * @Date: 2021-12-18 11:11:25
 * @LastEditors: DHL
 * @LastEditTime: 2022-10-08 17:20:33
-->
<template>
  <tw-dialog v-model="iconDialogVisible" title="ICON预览" height="75vh" @close="handleClose">
    <div class="icon-container">
      <div class="icon-flex">
        <div v-for="item in svgGroups.group1" :key="`ig1_${item}`" @click="handleCopy(item)">
          <p>
            <svg-icon :icon-class="item" class-name="icon-preview"></svg-icon>
          </p>
          <p>{{ item }}</p>
        </div>
      </div>

      <div class="icon-flex">
        <div v-for="item in svgGroups.group2" :key="`ig2_${item}`" @click="handleCopy(item)">
          <p>
            <svg-icon :icon-class="item" class-name="icon-preview"></svg-icon>
          </p>
          <p>{{ item }}</p>
        </div>
      </div>
    </div>
  </tw-dialog>
</template>

<script setup lang="ts">
  import { ElMessage } from 'element-plus'
  import { reactive, ref } from 'vue'
  import useClipboard from 'vue-clipboard3'

  interface Props {
    /**
     * 标记业务模块选择弹框
     */
    isSelect?: boolean
  }

  const props = withDefaults(defineProps<Props>(), {
    isSelect: false
  })

  const emit = defineEmits(['selectIcon'])

  //////////////////////////////////////////////////
  // 属性
  //////////////////////////////////////////////////
  const iconDialogVisible = ref(false)
  const svgGroups = reactive({
    group1: [] as Array<string>,
    group2: [] as Array<string>
  })

  // 复制插件
  const { toClipboard } = useClipboard()

  //////////////////////////////////////////////////
  // 函数
  //////////////////////////////////////////////////
  function handleOpen() {
    iconDialogVisible.value = true
    getIcons()
  }

  function handleClose() {
    iconDialogVisible.value = false
  }

  /**
   * 读取所有svg文件
   */
  function getIcons() {
    const svgs = import.meta.globEager('./svg/*.svg')
    Object.keys(svgs).forEach((key) => {
      const svgSplit = key.split('/')
      const svgName = svgSplit[svgSplit.length - 1]
      if (svgName.indexOf('Fill') > -1) {
        svgGroups.group2.push(svgName.replace('.svg', ''))
      } else {
        svgGroups.group1.push(svgName.replace('.svg', ''))
      }
    })
  }

  /**
   * 复制
   */
  async function handleCopy(iconName: string) {
    if (props.isSelect) {
      emit('selectIcon', iconName)
      handleClose()
      return
    }

    try {
      await toClipboard(iconName)
      ElMessage({
        message: `复制成功：${iconName}`,
        type: 'success'
      })
    } catch (e) {
      ElMessage({
        message: `复制失败：${iconName}`,
        type: 'error'
      })
    }
  }

  //////////////////////////////////////////////////
  // 暴露出去，父组件才可以调用到
  //////////////////////////////////////////////////
  defineExpose({
    handleOpen
  })
</script>

<style scoped lang="scss">
  .icon-container {
    .icon-flex {
      display: flex;
      flex-wrap: wrap;

      div {
        width: 100px;
        height: 100px;
        padding: 10px;
        text-align: center;
        cursor: pointer;

        &:hover {
          background-color: #f2f6fc;
        }

        .icon-preview {
          width: 3em;
          height: 3em;
        }
      }
    }
  }
</style>
